<!-- 购物车 -->
<template>
	<view class='shop-cart'>
		<template v-if='list.length > 0  '>
			<!--自定义导航栏-->
			<uniNavBar title='购物车' :right-text='isNavBar?"完成":"编辑"' fixed='true' :status-bar='true'
				@clickRight='  isNavBar = !isNavBar  '></uniNavBar>

			<!--商品内容-->
			<view class='shop-list'>
				<view class='shop-item' v-for='(item,index) in list' :key='index'>
					<label class="radio" @tap='selectedItem(index)'>
						<radio value="" color="#FF3333" :checked="item.checked" /><text></text>
					</label>
					<image class='shop-img' :src="item.imgUrl" mode=""></image>
					<view class='shop-text'>
						<view class='shop-name'>{{item.name}}</view>
						<view class='shop-color f-color'>{{item.color}}</view>
						<view class='shop-price'>
							<view>¥{{item.pprice}}</view>
							<template v-if='!isNavBar'>
								<view>*{{item.num}}</view>
							</template>
							<template v-else>
								<uniNumberBox :value='item.num' :min='mixs' @change='changeNumber($event,index,item)'>
								</uniNumberBox>
							</template>
						</view>
					</view>
				</view>
			</view>
			<!--底部-->
			<view class='shop-foot'>
				<label class="radio foot-radio" @tap='checkedAllFn'>
					<radio value="" color='#FF3333' :checked="checkedAll" /><text>全选</text>
				</label>

				<template v-if='!isNavBar'>
					<view class='foot-total'>
						<view class='foot-count'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
						<view class='foot-num' @tap='goConfirmOrder'>结算({{totalCount.num}})</view>
					</view>
				</template>
				<template v-else>
					<view class='foot-total'>
						<view class='foot-num' style="background-color: #000000;">移入收藏夹</view>
						<view class='foot-num' @tap='delGoodsFn'>删除</view>
					</view>
				</template>

			</view>
		</template>
		<template v-else>
			<uniNavBar title='购物车' status-bar='true' fixed='true'></uniNavBar>
			<view class='shop-else-list'>
				<text>囧～购物车还是空的～</text>
			</view>
		</template>
		<Tabbar cureentPage='shopcart'></Tabbar>
	</view>
</template>
<script>
	//uniNavBar(自定义导航栏)=> https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html#
	//uniNumberBox (带加减按钮的数字输入框) https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html#
	import $http from '@/common/api/request.js'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		data() {
			return {
				isNavBar: false,
				mixs: 1
			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list,
				selectedList: state => state.cart.selectedList
			}),
			//模块化路径-》https://blog.csdn.net/qq_51055690/article/details/126506772
			...mapGetters('cart', ['checkedAll', 'totalCount'])
		},
		components: {
			uniNavBar,
			uniNumberBox,
			Tabbar
		},
		onShow() {

			this.getData();
		},
		methods: {
			...mapActions('cart', ['checkedAllFn', 'delGoodsFn']),
			// ...mapMutations('cart', ['selectedItem', 'initGetData', 'initOrder']),

			...mapMutations({
				selectedItem: 'cart/selectedItem',
				initGetData: 'cart/initGetData',
				unCheckAll: 'cart/unCheckAll',
				initOrder: 'initOrder'
			}),


			getData() {
				$http.request({
					url: "/selectCart",
					method: "POST",
					// header: {
					// 	token: true
					// }
				}).then((res) => {
					this.initGetData(res);
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			changeNumber(value, index, item) {
				console.log("sss", value, index, item);
				if (item.num == value) return;
				$http.request({
					url: "/updateNumCart",
					method: "POST",
					// header: {
					// 	token: true
					// },
					data: {
						goodsId: item.goods_id,
						num: value
					}
				}).then((res) => {
					console.log(res);
					this.list[index].num = value;
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			//进入确认订单
			goConfirmOrder() {
				if (this.selectedList.length === 0) {
					return uni.showToast({
						title: "请至少选择一件商品",
						icon: "none"
					})
				}

				let newList = [];
				this.list.forEach(item => {
					this.selectedList.filter(v => {
						if (item.id == v) {
							newList.push(item);
						}
					})
				})

				$http.request({
					url: "/addOrder",
					method: "POST",
					// header: {
					// 	token: true
					// },
					data: {
						arr: newList
					}
				}).then((res) => {
					if (res.success) {
						//存储订单号
						this.initOrder(res.data[0].order_id);
						//跳转页面
						uni.navigateTo({
							url: `/pages/confirm-order/confirm-order?detail=${JSON.stringify(this.selectedList)}`
						})
						// this.unCheckAll() //清空所选项
					}

				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})

			}
		}
	}
</script>

<style scoped>
	.shop-list {
		padding-bottom: 220rpx;
	}

	.shop-else-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shop-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #F7F7F7;
		margin-bottom: 10rpx;
	}

	.shop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-name {
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	
	.shop-text {
		flex: 1;
		padding-left: 20rpx;
	}

	.shop-color {
		font-size: 24rpx;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.shop-foot {
		border-top: 2rpx solid #F7F7F7;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 120rpx;
		/* bottom: var(--window-bottom, 0); */
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.foot-radio {
		padding-left: 20rpx;
	}

	.foot-total {
		display: flex;
	}

	.foot-count {
		line-height: 100rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
	}

	.foot-num {
		background-color: #49BDFB;
		color: #FFFFFF;
		padding: 0 60rpx;
		line-height: 100rpx;
	}
</style>